<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, reactive} from "vue";
import LeftDis from "@/views/Distribution/LeftDis.vue";
import zhuzhuangtu from '@/components/zhuzhuangtu.vue';
import biaoge from '@/components/biaoge.vue';
import zhexiantu from '@/components/zhexiantu.vue';
import zhexiant from '@/components/zhexiant.vue';
import bingtu from '@/components/bingtu.vue';
import zhuzhuangt from '@/components/zhuzhuangt.vue';
import place from '@/components/place.vue';
const Dis_data: any = reactive([])
import RightDis from "@/views/Distribution/RightDis.vue";
import IndexView from "@/views/Ans/IndexView.vue";
function getData() {
  axios.get('/stu-api/queryAllins').then((response) => {
    Dis_data.value = response.data
  });
}

const Dis_chart_data = computed(() => {
  return Dis_data.value;
});
onMounted(() => {
  getData()
})
</script>

<template>
  <!-- 第一行 -->
  <div class="lhz-row">
    <div class="lhz-col">
      <div class="count-base">
        <div class="com-count-title"></div>
        <zhuzhuangt></zhuzhuangt>
        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:350px;">
            <bingtu></bingtu>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>
    <div class="lhz-col">
      <div class="count-base">
        <div class="com-count-title"></div>
        <zhexiant></zhexiant>

        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:350px;">
            <biaoge></biaoge>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
<!--    <div style="width: 20px;"></div>-->
<!--    <div class="lhz-col">-->
<!--      <div class="count-base">-->
<!--        <div class="com-count-title">对sql掌握程度统计图</div>-->
<!--        <div class="com-screen-content">-->
<!--          <div id="age_count" style="width:100%;height:300px;">-->
<!--            <habit/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <span class="left-top"></span>-->
<!--        <span class="right-top"></span>-->
<!--        <span class="left-bottom"></span>-->
<!--        <span class="right-bottom"></span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
  <!-- 第二行 -->
  <div class="lhz-row">
    <div class="lhz-col">
      <div class="count-base">
        <div class="com-count-title">对python语言掌握程度饼图</div>
<!--        <biaoge></biaoge>-->

        <div class="com-screen-content">
          <div id="age_count" style="width:100%;height:350px;">
            <left-dis :chart_option= Dis_chart_data v-if="Dis_data.value"/>
          </div>
        </div>
        <span class="left-top"></span>
        <span class="right-top"></span>
        <span class="left-bottom"></span>
        <span class="right-bottom"></span>
      </div>
    </div>
    <div style="width: 20px;"></div>-->
        <div class="lhz-col">
          <div class="count-base">
            <div class="com-count-title">对sql掌握程度统计图</div>
<!--            <bingtu></bingtu>-->

            <div class="com-screen-content">
              <div id="age_count" style="width:100%;height:350px;">

              </div>
            </div>
            <span class="left-top"></span>
            <span class="right-top"></span>
            <span class="left-bottom"></span>
            <span class="right-bottom"></span>
          </div>
        </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/scss_variable.scss";

.lhz-col > div {
  width: 100%;
  //height: 470px;
}

.count-base,
.count-resource,
.count-share,
.count-topic {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  box-sizing: border-box;
  text-align: center;
}

/*单个图表容器*/
.count-base {
  background: url('@/assets/img/left-top3.jpg') center no-repeat;
  background-size: cover;
}

/*标题*/
.com-count-title {
  color: #1bb4f9;
  font-size: 18px;
  padding: 0;
}

/*显示区域*/
.com-screen-content {
  width: 100%;
  height: auto;
}

/*四角*/
.left-top,
.right-top,
.left-bottom,
.right-bottom {
  position: absolute;
  width: 13px;
  height: 13px;
}

.left-top,
.right-top {
  top: 0;
  border-top: solid 2px #045291;
}

.left-bottom,
.right-bottom {
  bottom: 0;
  border-bottom: solid 2px #045291;
}

.left-top {
  left: 0;
  border-left: solid 2px #045291;
}

.right-top {
  right: 0;
  border-right: solid 2px #045291;
}

.left-bottom {
  left: 0;
  border-left: solid 2px #045291;
}

.right-bottom {
  right: 0;
  border-right: solid 2px #045291;
}
</style>